<!--
 * @Author: your name
 * @Date: 2021-10-20 18:35:23
 * @LastEditTime: 2021-10-21 21:49:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup-jz-ui\src\pages\base\category\List.vue
-->
<template>
    <!-- 产品分类 -->
    <div class="category-list page-tem1">
    <!-- 按钮    搜索表单 -->
    <div class="btns">
        <el-form size="small" inline :model="form" v-loading="loading">
        <el-form-item>
            <el-input v-model="params.name"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button icon="el-icon-search" type="primary">搜索</el-button>
            <el-button   @click="toAddHandler" >添加</el-button>
            <el-button>导出</el-button>
        </el-form-item>
        </el-form>
    </div>
    <!-- /按钮搜索表单 -->
    <!--  数据-->
    <div class="content">
        <!-- {{categoryData.list}} -->
<el-table :data="categoryData.list">
    <el-table-column prop='name' label="名称">
            <template slot-scope="scope">
        <div class="icon-name">
            <img :src="scope.row.icon" alt="">
            <span>{{scope.row.name}}</span>
        </div>
    </template>
    </el-table-column>

    <el-table-column prop='num' label="序号"></el-table-column>
    <el-table-column   width="250"class="handler" label='操作'>

        <template slot-scope="scope">
            <el-button @click="delHandler(scope.row)" size='small'>删除</el-button>
            <el-button @click="editHandler(scope.row)" size='small'>修改</el-button>
        </template>

    </el-table-column>
</el-table>
    </div>
    <!--  /数据-->
    <!--/分页  -->
    <el-pagination
    class="pages"
    small
    hide-on-single-page
  background
  @current-change='pageChange'
  layout="prev, pager, next"
  :page-size='categoryData.pageSize'
  :curren-page='categoryData.page'
  :total="categoryData.total">
</el-pagination>
    <!--  /分页-->
    <!-- 抽屉 -->
    <el-drawer
    @closed="clearValidate('pc_form')"
  :title="title"
  class="drawer"
  :visible.sync="visible">
<el-form ref="pc_form" :rules="rules" :model="form">
       <el-form-item  prop="name" label='名称' label-width='60px'>
           <el-input v-model='form.name' type="text"/>
       </el-form-item>
        <el-form-item prop="num" label='序号'label-width='60px'>
           <el-input v-model='form.num'  type="text"/>
       </el-form-item>
        <el-form-item  label='图标'label-width='60px'>
            <!-- 上传文件 -->
            <el-upload
            class="avatar-uploader"
            :action="baseUrl+'/file/upload'"
            :show-file-list="false"
            :on-success="handleUploadSuccess">
            <img v-if="form.icon" :src="form.icon" class="avatar">
            <div v-else  class="jiahao">
            <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
            </el-upload>
       </el-form-item>

       <el-form-item style="text-align:right">
<el-button  class="que" @click="submitHandler">确定</el-button>
       </el-form-item>
   </el-form>

</el-drawer>

  </div>
</template>
<script>
import { get ,post} from "@/utils/request";
import _ from "lodash"
export default {
    data() {
        return {
            baseUrl:process.env.VUE_APP_BASE_API,//接口基地址 
            fileUrl:process.env.VUE_APP_FILE_BASE_URL,
            title:'添加产品分类信息',
            visible:false,
            loading:false,
        params: {
            page: 1,
            pageSize: 6,
        }, //参数
        form: {}, //表单  /保存、更新,
        categoryData:{},
        rules:{
            name:[
                {required: true,message:"请输入分类名称",trigger:'blur'}],
            num:
            [{required:true,message:"请输入序号",trigger:"blur"}]
        }
        };
    },
    methods: {
        //删除

        delHandler({id}){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
            let url="/productCategory/deleteById";
            get(url,{id}).then(resp=>{
                // console.log(resp)
                this.$message.success(resp.message);
                this.loadCategoryList();
            })
            }
        ).catch(()=>{
          this.$message({
              type:"info",
              message:"已取消删除"
          })
        
          
            }
            )



        },
        editHandler(row){
            this.title="修改产品分类";
            this.form=_.cloneDeep(row);
            this.visible=true
            },
        //清除校验
        clearValidate(ref){

            this.$refs[ref].clearValidate();
        },
        //提交添加的表单
        submitHandler(){
            //valid 是一个boolean类型的参数  true才会执行
            this.$refs.pc_form.validate(valid=>{
                if(valid){
                let url = "/productCategory/saveOrUpdate";
            post(url,this.form).then(resp=>{
                this.$message.success(resp.message)
                this.visible=false;
                this.loadCategoryList();


            })
                }
            })

        },
        //添加图片
        // 双向数据绑定，要数据变化才会引起视图变化，而引用数据类型中的属性发生变化 不会引起视图改变，因为没有改变地址，为了让视图改变，我们需要手动深克隆一下改变地址
        handleUploadSuccess(resp){
            if(resp.status===200){
                let {id,groupName} = resp.data;
                let icon_url = this.fileUrl+groupName+"/"+id ;
                this.form.icon=icon_url;
                this.form = _.cloneDeep(this.form)//深克隆，然后就可以改变视图了！
                // alert(JSON.stringify(this.form))
            }else{
                this.$message({type:"error",message:resp.message})
            }
        },
        //添加——>抽屉
        toAddHandler(){
            this.form={};
            this.titile='添加产品分类信息';
            this.visible=true
        },
        //加载栏目数据
        loadCategoryList(){
            this.loading=true
            let url="/productCategory/pageQuery"
            get(url,this.params,).then(resp=>{
                this.categoryData=resp.data
                // console.log(this.categoryData);
            }).finally(()=>this.loading=false)

        },
        //分页改变函数
        pageChange(page){
            this.params.page=page;
            this.loadCategoryList()
        }
    },
    mounted(){
        this.loadCategoryList();
    }
};
</script>
<style lang='scss' scoped>
/* 抽屉确定按钮样式 */
.que{
    text-align:center;
    margin:20px;
}
.content{
    .handler{
        flex: 200px;
    }
    .icon-name{
        display: flex;
        img{
            width: 30px;
            border: aqua solid 1px;
        }
        span{
            line-height: 30px;
        }
    }
}
.drawer{
    img{
        border: rgb(143, 143, 143) 1px dashed;
        width: 30%;
    }
    .jiahao{
        display: inline-block;
        width: 100px;
        height: 100px;
        border: aquamarine 1px dashed;
        i{
           line-height: 100px;
        }
    }
}
</style>